﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Cells with DropDown List</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.combobox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.combobox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";
				$scope.sampleRows = [];
				$scope.defaultIcon = "icons-medium empty-doc";

				$scope.comboList = [
					{ icon: 'icons-medium speed', text: 'Speedy Express' },
					{ icon: 'icons-medium empty', text: 'Federal Shipping' },
					{ icon: 'icons-medium transfer', text: 'United Package' }
				];

				$scope.sampleColumns = [
					{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 250 },
					{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 120 },
					{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 120 },
					{ 
						id: 4,
						columnTitle: "Ship Via",
						columnAlignment: "center",
						editorType: 'combobox',
						editorSettings: {
							items: $scope.comboList,
							dropDownWidth: 175,
							maxDropDownItems: 3
						},
						size: 130
					},
					{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 100 },
					{ id: 8, columnTitle: "Country", columnAlignment: "center", cellAlignment: 'center' }

				];

				$scope.flatData = [
					{ 
						rowID: 1,
						icon: "icons-medium people",
						rowText: "Piccolo und mehr",
						cells: [{ cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]
					},
					{ 
						rowID: 11,
						parentID: 1,
						rowText: "Order #10259",
						cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, value: $scope.comboList[0] }, { cid: 5, cellText: "360.63" }]
					},
					{ 
						rowID: 12,
						parentID: 1,
						rowText: "Order #11094",
						cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, value: $scope.comboList[0] }, { cid: 5, cellText: "200.14" }]
					},
					{ 
						rowID: 2,
						icon: "icons-medium people",
						rowText: "Frankenversand",
						cells: [{ cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "München" }, { cid: 8, cellText: "Germany" }]
					},
					{ 
						rowID: 21,
						parentID: 2,
						rowText: "Order #11536",
						cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, value: $scope.comboList[1] }, { cid: 5, cellText: "85.53" } ]
					},
					{ 
						rowID: 22,
						parentID: 2,
						rowText: "Order #14472",
						cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, value: $scope.comboList[1] }, { cid: 5, cellText: "112.30" } ]
					},
					{ 
						rowID: 3,
						icon: "icons-medium people",
						rowText: "Laughing Bacchus Wine Cellars",
						cells: [{ cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]
					},
					{ 
						rowID: 31,
						parentID: 3,
						rowText: "Order #11495",
						cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, value: $scope.comboList[2] }, { cid: 5, cellText: "49.28" } ]
					}
				];

				$scope.dataFields = {
					column: {
						headerText: 'columnTitle',
						headerAlignment: 'columnAlignment',
						contentAlignment: 'cellAlignment',
						width: 'size'
					},
					row: {
						id: 'rowID',
						pid: 'parentID',
						text: 'rowText'
					},
					cell: {
						text: 'cellText'
					}
				}

				var loadTimer = $timeout(function(){
					$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);


					$timeout.cancel(loadTimer);
				}, 1);
			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
		.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell
		{
			padding: 1px 3px;
		}
		.iui-treegrid-row-cell-content
		{
			padding: 1px 3px;
		}
        .iui-list
        {
            font-size: 0.75em;
        }
        .iui-list-item
        {
        	padding: 0;
        }
        .iui-list-item-content
        {
        	margin-left: 3px;
        }

		/* Sample settings */
		.control-panel
		{
			width: 170px;
		}
		.feature-content
		{
			width: 900px;
		}
		.feature-list
		{
			width: 300px;
		}
        .directive
        {
        	border: thin solid #cecece;
        	width: 900px;
        	height: 300px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Cells with DropDown List</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" show-footer="false" ></iui-treegrid>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This example shows how to add a simple drop down list to cells in TreeGrid, AngularJS. This is done by setting the <span class="code-field">editorType</span> field of specified column to <span class="code-string">'combobox'</span>, which allows ComboBox component with a drop down list to appear below a cell. The drop down list contains items with an icon and label.</p>
                    <p>In this example, cells that belong to the 'Ship Via' column have a ComboBox editor. The editor can appear using mouse cursor or by pressing the 'ENTER' key when cell has the input focus. In either case, when item is selected from the drop down list, the cell value will change. During this process, two events are fired:</p>
                    <ul>
                    	<li><span style="color:#c60d0d">cellvalueChanging</span> - occurs when cell value is about to change</li>
                    	<li><span style="color:#c60d0d">cellvalueChanged</span> - occurs when cell value has changed</li>
                    </ul>
                    <p><span class="initial-space"></span>By adding handlers for these events in your application code, you can set custom conditions and change the end result. For example, you can prevent some cell to change its value.</p>
                    <p><span class="initial-space"></span>In case of ComboBox editor, each cell accept only values from the drop down list. If any other value is used, it will be discarded when editor appears.</p>
                    <p><span class="initial-space"></span>For more information on how to set and use ComboBox editor, check out this sample: <a href="combobox-checklist.html">Grids / ComboBox Editor</a>.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
